<template>
  <div class="app-container">  <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange($event)">
      <el-checkbox v-for="(item,index) in cities"   :label="item.label" :key="index">{{item.label}}</el-checkbox>
    </el-checkbox-group>
     
   
    <el-table :data="tableData" style="width: 100%">
      <template v-for="item in resData">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
         
      
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
const cityOptions = [
  {
    label: "城市",
    prop: "city",
  },
  {
    label: "学校",
    prop: "city1",
  },
  {
    label: "家",
    prop: "city2",
  },
];
export default {
  data() {
    return {
      showbtns: false,
      checkAll: false,
      checkedCities: [],
      checked:true,
      isSame:false,
      cities: cityOptions,
      tableData: [
        { name: "zhangsan", age: "14", city: "城市", city1: "城市1" },
        { name: "zhangsan", age: "14", city: "城市", city1: "城市1" },
      ],
      resData: [
        { label: "姓名", prop: "name" },
        { label: "年龄", prop: "age" },
      ],
    };
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
 
    handleCheckedCitiesChange(val) {
      console.log(val.toString())
      let res = [];

      let obj = {};
      let valString = val[val.length - 1];
      let _self=this;
       this.resData.find(function(item) {
            if (item.label === valString) {
              console.log(item.label+'------'+valString)
              _self.isSame=true;
                
            }
        })
       obj = this.cities.find((item) => {
        return item.label === valString;
      });
      if(!this.isSame){

            this.resData.push({ label: obj.label, prop: obj.prop });
            this.isSame=false;
      }
 
       
    },
  },
};
</script>

<style scoped>
.title_test {
  position: relative;
}
.handleClose {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
